<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
<!-- css样式 -->
    <link rel="stylesheet" type="text/css" href ="index.css"></style>
    <!-- js部分 -->
   

</head>
<body>
    <div class="container">
        <!-- 先把第一张图片显示出来 -->
        <img class="on" src="https://atts.w3cschool.cn/attachments/image/20210315/1615775577508541.png" />
        <img src="https://atts.w3cschool.cn/attachments/image/20210315/1615775588582946.png" />
        <img src="https://atts.w3cschool.cn/attachments/image/20210315/1615775600706129.png" />
        <img src="https://atts.w3cschool.cn/attachments/image/20210315/1615775609357680.png" />
        <!-- 左右切换 -->
        <div class="left"><</div>
        <div class="right">></div>
        <!-- 焦点 -->
        <ul>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>


</body>
<script src="index.js"></script>
</html>